<!--
    @Description: 大屏导航页
    @author: 拾光丶
    @date: 2023/8/14 上午 9:31
    @projectName: ruoyi-ui
    @path: src/views/bigscreen/home
-->
<template>
  <div class="container">
    <div class="header">
      <div class="quit" @click="">
        <img src="../../../assets/main/index.png" @click="$router.push({path:'/bigscreen'})" alt="">
      </div>
    </div>
    <div class="body">
      <div v-for="(item ,index ) in list" @click="goMenu(item)">
        <div class="title">
          {{ item.wmdaName }}
        </div>
        <div class="icon">
          <img :src="require(`@/assets/main/icon${index+1}.png`)" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'index',
  data() {
    return {
      list: [
        {
          wmdaName: '政治思想工作领导班子建设'
        },
        {
          wmdaName: '业务工作'
        },
        {
          wmdaName: '基层党组织建设'
        },
        {
          wmdaName: '党风廉政建设'
        },
        {
          wmdaName: '群团工作'
        },
        {
          wmdaName: '文明建设'
        },
        {
          wmdaName: '负面清单'
        },
        {
          wmdaName: '附加分'
        }

      ],
      year: ''
    }
  },
  components: {},
  props: {},
  methods: {
    getData() {
      this.list = [
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 580,
          'orderNum': 1,
          'parentId': 577,
          'wmdaName': '政治思想工作领导班子建设',
          'cp002': '2018-1',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        },
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 581,
          'orderNum': 2,
          'parentId': 577,
          'wmdaName': '业务工作',
          'cp002': '2018-2',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        },
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 582,
          'orderNum': 3,
          'parentId': 577,
          'wmdaName': '基层党组织建设',
          'cp002': '2018-3',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        },
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 583,
          'orderNum': 4,
          'parentId': 577,
          'wmdaName': '党风廉政建设',
          'cp002': '2018-4',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        },
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 584,
          'orderNum': 5,
          'parentId': 577,
          'wmdaName': '群团工作',
          'cp002': '2018-5',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        },
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 585,
          'orderNum': 6,
          'parentId': 577,
          'wmdaName': '文明建设',
          'cp002': '2018-6',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        },
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 586,
          'orderNum': 7,
          'parentId': 577,
          'wmdaName': '负面清单',
          'cp002': '2018-7',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        },
        {
          'searchValue': null,
          'createBy': '',
          'createTime': '2020-07-14 10:19:14',
          'updateBy': '',
          'updateTime': null,
          'remark': null,
          'params': {},
          'id': 587,
          'orderNum': 8,
          'parentId': 577,
          'wmdaName': '附加分',
          'cp002': '2018-8',
          'dictid': null,
          'ext1': '',
          'ext2': '2',
          'ext3': '2018',
          'ext4': null,
          'ext5': null,
          'children': []
        }
      ]
    },
    goMenu(data) {
      console.log(data)
      this.$router.push(
        {
          path: '/bigscreen/menu',
          query: {
            cp002: data.id,
            year: this.year
          }
        })

    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
    this.year = this.$route.query.year
    this.getData(this.year)
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  background-image: url('../../../assets/main/globalBackground.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0 4%;
  padding-top: 5%;
  overflow: hidden;

  .header {
    min-height: 350px;
    background-image: url('../../../assets/main/header.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    //background-position: center;
    position: relative;

    .quit {
      position: absolute;
      right: 2%;
      bottom: 20px;
      cursor: pointer;
    }
  }

  .body {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    padding: 0 100px;

    & > div {
      width: calc(25% - 20px);
      height: 200px;
      border: 1px solid #FFFFFF;
      border-radius: 10px;
      margin: 0 10px;
      margin-bottom: 30px;
      display: flex;
      justify-content: space-between;
      overflow: hidden;
      cursor: pointer;

      .title {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2em;
        width: 50%;
        font-size: 18px;
        color: #FFF;
        font-weight: 600;
        background: rgb(245, 141, 126);
        background: linear-gradient(45deg, rgba(245, 141, 126, 1) 0%, rgba(245, 176, 0, 1) 50%, rgba(252, 244, 215, 1) 100%);
      }

      .icon {
        width: 50%;
        background-image: url('../../../assets/main/1.png');
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;


      }


    }

    & > div:nth-child(2n) {
      .title {
        background: rgb(204, 112, 222);
        background: linear-gradient(45deg, rgba(204, 112, 222, 1) 0%, rgba(139, 196, 243, 1) 50%, rgba(208, 241, 242, 1) 100%);
      }

    }
  }

}
</style>
